<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单 - 外卖管理系统</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/orders.css">
</head>
<body>
    <nav class="navbar">
        <div class="container">
            <h1>外卖管理系统</h1>
            <ul>
                <li><a href="../index.html">首页</a></li>
                <li><a href="restaurants.html">餐厅列表</a></li>
                <li><a href="orders.html" class="active">我的订单</a></li>
                <li><a href="login.html">登录</a></li>
                <li><a href="register.html">注册</a></li>
            </ul>
        </div>
    </nav>

    <div class="container">
        <div class="orders-filter">
            <select id="statusFilter">
                <option value="">全部订单</option>
                <option value="pending">待支付</option>
                <option value="paid">已支付</option>
                <option value="preparing">准备中</option>
                <option value="delivering">配送中</option>
                <option value="completed">已完成</option>
                <option value="cancelled">已取消</option>
            </select>
        </div>

        <div class="order-list">
            <!-- 示例订单1 -->
            <div class="order-card">
                <div class="order-header">
                    <span class="order-id">订单号: #20231209001</span>
                    <span class="order-status status-delivering">配送中</span>
                </div>
                <div class="order-details">
                    <div class="restaurant-name">红烧肉大王</div>
                    <div class="order-items">
                        <div class="order-item">
                            <span>红烧肉饭 × 2</span>
                            <span>¥36.00</span>
                        </div>
                        <div class="order-item">
                            <span>可乐 × 1</span>
                            <span>¥3.00</span>
                        </div>
                        <div class="order-item">
                            <span>配送费</span>
                            <span>¥5.00</span>
                        </div>
                    </div>
                    <div class="order-total">
                        <span>总计</span>
                        <span>¥44.00</span>
                    </div>
                </div>
                <div class="order-actions">
                    <button class="btn btn-primary">查看详情</button>
                    <button class="btn btn-danger">取消订单</button>
                </div>
            </div>

            <!-- 示例订单2 -->
            <div class="order-card">
                <div class="order-header">
                    <span class="order-id">订单号: #20231209002</span>
                    <span class="order-status status-pending">待支付</span>
                </div>
                <div class="order-details">
                    <div class="restaurant-name">川味小馆</div>
                    <div class="order-items">
                        <div class="order-item">
                            <span>麻婆豆腐 × 1</span>
                            <span>¥22.00</span>
                        </div>
                        <div class="order-item">
                            <span>米饭 × 2</span>
                            <span>¥4.00</span>
                        </div>
                        <div class="order-item">
                            <span>配送费</span>
                            <span>¥5.00</span>
                        </div>
                    </div>
                    <div class="order-total">
                        <span>总计</span>
                        <span>¥31.00</span>
                    </div>
                </div>
                <div class="order-actions">
                    <button class="btn btn-primary">立即支付</button>
                    <button class="btn btn-danger">取消订单</button>
                </div>
            </div>

            <!-- 示例订单3 -->
            <div class="order-card">
                <div class="order-header">
                    <span class="order-id">订单号: #20231209003</span>
                    <span class="order-status status-completed">已完成</span>
                </div>
                <div class="order-details">
                    <div class="restaurant-name">寿司之家</div>
                    <div class="order-items">
                        <div class="order-item">
                            <span>三文鱼套餐 × 1</span>
                            <span>¥58.00</span>
                        </div>
                        <div class="order-item">
                            <span>茶碗蒸 × 1</span>
                            <span>¥12.00</span>
                        </div>
                        <div class="order-item">
                            <span>配送费</span>
                            <span>¥6.00</span>
                        </div>
                    </div>
                    <div class="order-total">
                        <span>总计</span>
                        <span>¥76.00</span>
                    </div>
                </div>
                <div class="order-actions">
                    <button class="btn btn-primary">再次购买</button>
                </div>
            </div>
        </div>
    </div>

    <script src="../js/orders.js"></script>
</body>
</html>
